<template>
  <div class="b-content" :style="{ 'border-color': borderColor }">
    <el-container>
      <el-header>
        <el-card class="b-card-header" shadow="never">
          <div class="b-card-heard-contain">
            <el-input
              clearable
              :prefix-icon="ChatDotRound"
              v-model="message.Content"
              maxlength="200"
              placeholder="请输入消息"
              show-word-limit
              type="text"
            />
            <el-button type="primary" @click="Send" :loading="isLoading">
              {{ $t("MessageBoard.Send") }}
              <el-icon class="el-icon--right">
                <Position />
              </el-icon>
            </el-button>
          </div>
        </el-card>
      </el-header>
      <el-main>
        <el-scrollbar>
          <el-card shadow="never" class="b-card-body">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in messages"
                :timestamp="item.TimeDay"
                placement="top"
              >
                <el-card class="b-card" v-for="children in item.Children">
                  <h4 class="b-title">
                    {{
                      "用户:" +
                      children.UserName +
                      " " +
                      utils.formatDateTime(children.CreateTime) +
                      "发布"
                    }}
                  </h4>
                  <p class="b-message">{{ children.Content }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>
<style lang="scss">
.b-content {
  height: calc(100vh - 120px);
  overflow: hidden;
  border: 1px solid !important;

  //布局容器
  .el-container {
    //头
    .el-header {
      z-index: 1;
      height: calc(15%);

      .b-card-header {
        height: 100%;
        display: flex;
        flex-direction: column;

        border-radius: 0px;
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;

        .b-card-heard-contain {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    //身
    .el-main {
      width: 100%;
      height: 100%;
      padding: 0px !important;

      .b-card-body {
        border: 0px !important;

        .b-card {
          margin-bottom: 10px !important;
        }

        .b-title {
          margin: 0px !important;
        }

        .b-message {
          margin-bottom: 0px !important;
        }
      }
    }
  }
}
</style>

<script setup>
import { useStore } from "vuex";
var store = useStore();

//导入图标
import { Position, ChatDotRound } from "@element-plus/icons-vue";
import { h, inject, onMounted, reactive, ref, watch } from "vue";

//获取全局axios
const axios = inject("axios", "");
//获取封装的 格式化时间方法
const utils = inject("utils");

//用于获取页面颜色模式
import { useColorMode } from "@vueuse/core";
import { ElNotification } from "element-plus";
const mode = useColorMode();
const borderColor = ref(
  mode.value == "dark" ? "#414243 !important" : "#e4e7ed !important"
);

//数据更改时监听
watch(mode, (newmode) => {
  console.log(newmode);
  borderColor.value =
    newmode == "dark" ? "#414243 !important" : "#e4e7ed !important";
});

//发送留言请求接口时按钮加载动画
const isLoading = ref(false);
//留言发送的方法包括双向绑定参数
const message = reactive({
  UserID: sessionStorage.getItem("userId"),
  Content: "",
});
const Send = () => {
  //空白输入校验
  if (message.Content.trim() == "") {
    ElNotification({
      title: "提示",
      message: h("i", { style: "color: teal" }, "多少输入点东西吧?"),
      duration: 1000,
    });
    return;
  }
  isLoading.value = true;
  axios.post("BBS_MessageBoard/CerateMessage", message, null, (res) => {
    let nowDate = utils.MessageBoardByNowDate();
    // 找到匹配 TimeDay 的元素
    let ishave = messages.find((a) => a.TimeDay == nowDate);
    let data = {
      TimeDay: nowDate,
      Children: [
        {
          UserName: sessionStorage.getItem("userName"),
          CreateTime: new Date(),
          Content: message.Content,
        },
      ],
    };

    if (ishave) {
      ishave.Children.unshift(data.Children[0]);
    } else {
      messages.unshift(data);
    }

    //取消加载动画，清空留言框内容
    isLoading.value = false;
    message.Content = "";
  });
};

//加载留言的方法
const messages = reactive([]);
const GetMessageBoard = () => {
  axios.get("BBS_MessageBoard/GetMessageBoard", null, null, (res) => {
    if (res.state == 200) {
      let data = JSON.parse(res.data);
      messages.push(...data);
    }
  });
};

watch(
  messages,
  (newValue) => {
    store.commit("messageBoardStore/upMsg", newValue);
  },
  { deep: true }
);

//组件挂载完成后执行
onMounted(() => {
  if (store.state.messageBoardStore.messages == null) {
    GetMessageBoard();
  } else {
    Object.assign(messages, store.state.messageBoardStore.messages);
  }
});
</script>
